<template>
	<view>
		<view class="pt100" v-if="!list.length">
			<u-empty mode="order" />
		</view>
		<view v-for="(item,index) in list" :key="index" class="box-shadow radius20 bg-fff m20 p20"
			@click="$u.route('/pages/orderList/orderDetails',{order_id:item.id})">
			<view class="bg-f8f pl10 pr10 radius12 flex row-between ov-h flex-wrap">
				<view class="p10">
					<view class="flex">
						<view class="color-999 fs26 flex1" v-if="!item.name">{{item.status_text}}</view>
						<block v-else>
							<image :src="item.avatar" class="h56 w56 radius" mode="aspectFill"></image>
							<view class="color-232323 ml20 flex1 u-line-1">{{item.name}}</view>
						</block>
					</view>
				</view>
				<view class=""></view>
				<view class="flex p10" v-if="item.status==1||(item.status==0&&item.type==0)">
					<block v-if="item.receive_countdown*1">
						<view class="fs26">距{{item.type==1?'抢单':item.type==0?'报价':'接单'}}结束：</view>
						<u-count-down :timestamp="item.receive_countdown" font-size="26" :color="$fs" separator="zh"
							separator-size="26" bg-color="transparent" :show-seconds="true" class=""
							:separator-color="$fs"></u-count-down>
					</block>
					<view v-else class="fs26">{{item.type==1?'抢单':item.type==0?'报价':'接单'}}已结束</view>
				</view>
				<view class="flex p10 u-line-1" v-else-if="item.status==0">
					<view class="fs26 color ">距付款结束：</view>
					<u-count-down :timestamp="item.pay_countdown" font-size="26" :color="$fs" separator="zh"
						separator-size="26" bg-color="transparent" :show-seconds="true" class="" :separator-color="$fs">
					</u-count-down>
					<block v-if="item.pay_countdown*1">
					</block>
				</view>
				<view class="p10 color-fs" v-else>{{item.status_text}}</view>
			</view>	
			<view class="flex mt36 flex-wrap border-b" v-if="item.type==0&&item.status==0">
				<view v-for="(item1,index1) in item.order_receive" :key="index1" class="text-center   mr54 pb24">
					<image :src="item1.avatar" class="h72 w72 radius " mode="aspectFill"></image>
					<view class="color-zs fs28 ">{{item1.offer_price}}</view>
				</view>
			</view>
			<view class="color-232323 fw-700 mt28">{{item.hospital}}</view>
			<view class="color-666 mt8 fs26">{{item.service_name}}</view>
			<view class="fs28 color-B7B5B5 mt18 border-b pb28">
				期望就诊时间：{{item.expect_time}}
			</view>
			<view class="flex ">
				<view class="flex flex1 mt24 nowrap" v-if="item.status==0&&item.type!=0">
					<view class="color-232323 fs28">{{item.pay_time?'已':'应'}}付：</view>
					<view class="fs26 color-fs">¥</view>
					<view class="fs30 color-fs">{{item.actual_price}}</view>
				</view>
				<view class="flex flex1" v-if="item.status==1||(item.status==0&&item.type==0)">
					<image src="/static/img/order/order.png" class="h114 w96" mode=""></image>
					<view class="ml20 nowrap" style="color: #FF704B;">
						已通知师傅来{{item.type==1?'抢单':item.type==0?'报价':'接单'}}啦~
					</view>
				</view>
				<view class="flex1"></view>
				<view class="bg-zs color-fff fs26 w160 h64 radius8 flex row-center mt24 ml20"
					v-if="item.status==0&&item.type==0&&item.order_receive&&item.order_receive.length">
					去雇佣
				</view>
				<view v-else-if="item.status<=2" @click="cancelOrder"
					class="border-zs color-zs fs26 w160 h64 radius8 flex row-center mt24">取消订单</view>
				<view v-if="item.status==0&&item.type!=0"
					@click.stop="$u.route('/pages/index/demo/pay',{order_sn:item.order_sn})"
					class="bg-zs color-fff fs26 w160 h64 radius8 flex row-center mt24 ml20">
					去付款
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "orderList",
		props: {
			list: {
				default: ''
			}
		},
		data() {
			return {
				index: 0
			};
		},
		methods: {
			cancelOrder() {
				// this.$nextTick(()=>{
				// 	uni.$emit('cancelOrder', true)
				// })
				// return
				setTimeout(() => {
					uni.$emit('cancelOrder', true)
				}, 200)
			}
		}
	}
</script>

<style lang="scss">

</style>
